import { useEffect, useRef } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Button } from "@tarojs/components";
import HistogramChart from "../../components/HistogramChart";
import LineChart from "../../components/LineChart";
// import { Canvas } from "@tarojs/components";
// import * as Echarts from "../../utils/echarts";
import "./index.scss";

export default () => {
  const echartRef = useRef();
  const data = [
    { genre: "Sports", sold: 275 },
    { genre: "Strategy", sold: 115 },
    { genre: "Action", sold: 120 },
    { genre: "Shooter", sold: 350 },
    { genre: "Other", sold: 150 },
  ];
  const dataLine = [
    {
      date: "2017-06-05",
      value: 116,
    },
    {
      date: "2017-06-06",
      value: 129,
    },
    {
      date: "2017-06-07",
      value: 135,
    },
    {
      date: "2017-06-08",
      value: 86,
    },
    {
      date: "2017-06-09",
      value: 73,
    },
    {
      date: "2017-06-10",
      value: 85,
    },
    {
      date: "2017-06-11",
      value: 73,
    },
    {
      date: "2017-06-12",
      value: 68,
    },
    {
      date: "2017-06-13",
      value: 92,
    },
    {
      date: "2017-06-14",
      value: 130,
    },
    {
      date: "2017-06-15",
      value: 245,
    },
    {
      date: "2017-06-16",
      value: 139,
    },
    {
      date: "2017-06-17",
      value: 115,
    },
    {
      date: "2017-06-18",
      value: 111,
    },
    {
      date: "2017-06-19",
      value: 309,
    },
    {
      date: "2017-06-20",
      value: 206,
    },
    {
      date: "2017-06-21",
      value: 137,
    },
    {
      date: "2017-06-22",
      value: 128,
    },
    {
      date: "2017-06-23",
      value: 85,
    },
    {
      date: "2017-06-24",
      value: 94,
    },
    {
      date: "2017-06-25",
      value: 71,
    },
    {
      date: "2017-06-26",
      value: 106,
    },
    {
      date: "2017-06-27",
      value: 84,
    },
    {
      date: "2017-06-28",
      value: 93,
    },
    {
      date: "2017-06-29",
      value: 85,
    },
    {
      date: "2017-06-30",
      value: 73,
    },
    {
      date: "2017-07-01",
      value: 83,
    },
    {
      date: "2017-07-02",
      value: 125,
    },
    {
      date: "2017-07-03",
      value: 107,
    },
    {
      date: "2017-07-04",
      value: 82,
    },
    {
      date: "2017-07-05",
      value: 44,
    },
    {
      date: "2017-07-06",
      value: 72,
    },
    {
      date: "2017-07-07",
      value: 106,
    },
    {
      date: "2017-07-08",
      value: 107,
    },
    {
      date: "2017-07-09",
      value: 66,
    },
    {
      date: "2017-07-10",
      value: 91,
    },
    {
      date: "2017-07-11",
      value: 92,
    },
    {
      date: "2017-07-12",
      value: 113,
    },
    {
      date: "2017-07-13",
      value: 107,
    },
    {
      date: "2017-07-14",
      value: 131,
    },
    {
      date: "2017-07-15",
      value: 111,
    },
    {
      date: "2017-07-16",
      value: 64,
    },
    {
      date: "2017-07-17",
      value: 69,
    },
    {
      date: "2017-07-18",
      value: 88,
    },
    {
      date: "2017-07-19",
      value: 77,
    },
    {
      date: "2017-07-20",
      value: 83,
    },
    {
      date: "2017-07-21",
      value: 111,
    },
    {
      date: "2017-07-22",
      value: 57,
    },
    {
      date: "2017-07-23",
      value: 55,
    },
    {
      date: "2017-07-24",
      value: 60,
    },
  ];
  const config01 = {
    id: "confi01",
    data,
    xField: "genre",
    yField: "sold",
    color: "#2FC25B",
  };
  const config02 = {
    id: "confi02",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const config03 = {
    id: "confi03",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const config04 = {
    id: "confi04",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const config05 = {
    id: "confi05",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const config06 = {
    id: "confi06",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const config07 = {
    id: "confi07",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const config08 = {
    id: "confi08",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const config09 = {
    id: "confi09",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const config10 = {
    id: "confi10",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  const initChart = (canvas, width, height) => {
    const chart = Echarts.init(canvas, null, {
      width: width,
      height: height,
    });
    canvas.setChart(chart);

    var option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    chart.setOption(option);
    return chart;
  };
  const onWxCanvas = (id) => {
    const query = Taro.createSelectorQuery();
    query
      .select("#" + id)
      .fields({
        node: true,
        size: true,
      })
      .exec((res) => {
        const { node, width, height } = res[0];
        const chart = initChart(node, width, height);
      });
  };
  useEffect(() => {
    setTimeout(() => {
      //   onWxCanvas("chart001");
    }, 500);
  }, []);
  return (
    <View>
      <Text>图1</Text>
      <HistogramChart {...config01}></HistogramChart>
      <Text>图2</Text>
      <LineChart {...config02}></LineChart>
      <Text>图3</Text>
      <LineChart {...config03}></LineChart>
      <Text>图4</Text>
      <LineChart {...config04}></LineChart>
      <Text>图5</Text>
      <LineChart {...config05}></LineChart>
      <Text>图6</Text>
      <LineChart {...config06}></LineChart>
      <Text>图7</Text>
      <LineChart {...config07}></LineChart>
      <Text>图8</Text>
      <LineChart {...config08}></LineChart>
      <Text>图9</Text>
      <LineChart {...config09}></LineChart>
      <Text>图10</Text>
      <LineChart {...config10}></LineChart>
      {/* <Canvas ref={echartRef} type="2d" id="chart001" /> */}
    </View>
  );
};
